﻿@{
    ViewBag.Title = "Stories";
}

<h2>Stories</h2>

<p data-bind="visible: loadingStories"><img src="/Images/ajax-loader-small.gif" /> loading your stories</p>


<p data-bind="visible: stories().length == 0 && !loadingStories()">you've got no stories yet</p>

<ul class="stories-list" data-bind="foreach: stories, visible: stories().length > 0  && !loadingStories(), accordion: {header: 'h1', autoHeight: false, collapsible: true, active: false}">
    <li>
        <h1><a href="#" data-bind="text: title"></a></h1>
        <div>
            <h2 data-bind="text: subtitle"></h2>
            Created : <time data-bind="datetime: createdDate"></time>Last edit : <time data-bind="datetime: lastModifiedDate"></time>
            <p data-bind="text: description"></p>
            <a data-bind="attr: { href: openLink }">open</a> <a href="#" data-bind="click: $root.editStory">edit</a> <a href="#" data-bind="click: $root.confirmDelete">delete</a>
        </div>
    </li>
</ul>

<div id="newStoryBox" class="popup">
    <form class="miniForm" id="newStory" data-bind="submit: addStory" action="#">
        <p id="updateNotice"><img src="/Images/ajax-loader-small.gif" /> uploading, one moment please</p>
        <h1 data-bind="visible: mode() === 'edit'">edit story</h1>
        <h1 data-bind="visible: mode() === 'new'">new story</h1>
        <fieldset>
            <legend>New story</legend>
            <ol>
                <li>
                    <label class="inline" for="titleBox">title :</label>
                    <input id="titleBox" data-bind="value: editTitle" placeholder="title" />
                </li>
                <li>
                    <label class="inline" for="subtitleBox">subtitle :</label>
                    <input id="subtitleBox" data-bind="value: editSubtitle" placeholder="subtitle" />
                </li>
                <li>
                    <label for="descriptionBox">description :</label>
                    <textarea id="descriptionBox" data-bind="value: editDescription" placeholder="description"></textarea>
                </li>
                <li>
                    <input type="submit" value="save" /><input type="button" value="cancel" data-bind="click:cancelNewStory" />
                </li>
            </ol>

        </fieldset>
    </form>
</div>

<div id="confirmDeleteBox" class="popup">
    Are you sure you want to delete this story? This cannot be undone.
    <button data-bind="click: $root.yesDelete">yes</button> <button data-bind="click: $root.noDelete" class="noButton">no</button>
</div>

<button id="createStory" data-bind="click:startNewStory">Add new story</button>

<script type="text/javascript">
    ko.applyBindings(new ListStoriesViewModel());
</script>
